<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>头像遮罩层</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      width: 160px;
      height: 160px;
      border-radius: 50%;

      /* 在 border-radius 加持下, 超出box部分则被隐藏 */
      overflow: hidden;
      background-color: pink;
    }

    .box img {
      width: 100%;
      height: 100%;
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 160px;
      height: 160px;
      text-align: center;
      line-height: 160px;
      border-radius: 50%;
      background: rgba(0,0,0,0.5);
      color: #fff;
      font-size: 13px;
      cursor: pointer;

      opacity: 0;
    }

    .box:hover .mask {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./dieqi.png" alt="您的老婆-蝶祈">

    <!-- 遮罩层: 是鼠标经过 box 类名盒子、给 img 加上 "遮罩层" -->
    <div class="mask">更换头像</div>
  </div>
  
</body>

</html>